[#include "common/html.ftl" /]
[@html]
    [@head title="DB Adminer" css=["fw", "agreement"] ]
        <style>
            .page-number {
                position: absolute;
                bottom: 0;
                width: 100%;
                text-align: center;
            }
        </style>
    [/@head]
    [@body class="fw-none-bg" ]
        <div class="manage-modal">
            <div class="flipbook-viewport">
                <div class="container">
                    <div class="flipbook">
                        <div>
                            <div class="fm-top">
                                <p>协议编号：<span>XY1213134864</span></p>
                            </div>
                            <div class="fm-title">用户协议</div>
                            <div class="fm-sign">
                                <label for="">甲方(提供方)：</label>
                                <input class="input-class fm-input" type="text" value="DB Adminer" readonly>
                            </div>
                            <div class="fm-sign">
                                <label for="">乙方(使用人)：</label>
                                <input class="input-class fm-input" type="text" value="管理员">
                            </div>
                            <div class="fm-footer">
                                <p>二零二四年十月</p>
                                <p>用户协议签订</p>
                            </div>
                        </div>
                        <div>
                            <div class="manage-page">
                                <p class="am-text-center am-text-lg" style="font-weight: bolder;margin-bottom: 10px;">重要提示</p>
                                <p><span>&nbsp;&nbsp;</span>DB Adminer特别提示您，在使用DB Adminer服务前，请事先认真阅读本用户协议内容，特别是关于用户义务、用户责任及DB Adminer有限保证及免责的条款。拟登录用户在进入DB Adminer工作空间过程中，点击“我已仔细阅读并接受DB Adminer用户协议”即表示您完全接受并同意遵守本用户协议的全部内容。如您不同意本用户协议，则无法继续使用本服务提供的功能。</p>
                                <p>
                                    <span>&nbsp;&nbsp;</span>DB Adminer有权不时对本用户协议（包括各类业务规则）作出修改或补充，并通过DB Adminer系统公布。您继续访问和使用DB Adminer即视为您接受修订后的本用户协议。否则，您有权通过停止访问且拒绝使用本服务的方式终止本用户协议。
                                </p>
                            </div>
                        </div>
                        <div>
                            <div class="manage-page">
                                <p class="am-text-center am-text-lg" style="font-weight: bolder;margin-bottom: 10px;">目 录</p>
                                <p>1.定义</p>
                                <p>2.服务内容</p>
                                <p>3.账号信息</p>
                                <p>4.用户义务</p>
                                <p>5.服务变更、中断或终止</p>
                                <p>6.其他</p>
                            </div>
                        </div>
                        <div>
                            <div class="manage-page">
                                <p class="am-text-center am-text-lg" style="font-weight: bolder;margin-bottom: 10px;">DB Adminer用户协议条款</p>
                                <p style="text-indent: 0em;">一、定义</p>
                                <p>1.1<span>&nbsp;&nbsp;</span>DB Adminer：指DB Adminer系统。</p>
                                <p style="text-indent: 0em;margin-top: 10px;">二、服务内容</p>
                                <p>DB Adminer是一个面向软件研发人的基于Web的数据库专业工具平台，为各位软件开发提供数据库管理、操作的服务平台，主要服务内容如下：</p>
                                <p>2.1<span>&nbsp;&nbsp;</span>DB Adminer通过大部分用户的使用习惯和设计精致的操作界面，为用户提供不错的使用体验。</p>
                                <p>2.2<span>&nbsp;&nbsp;</span>DB Adminer致力于为用户提供各个环境的多个类型数据库的管理以及数据操作等过程中所需的工具产品及专业服务。针对对数据安全要就特别高的情景，对数据库提供了权限配置，对数据安全要求特别高的操作提供了人工审批。</p>
                                <p>2.3<span>&nbsp;&nbsp;</span>DB Adminer在操作及数据安全方面也做了很多处理，进入系统前设置了基础身份认证和登录认证，进入系统后对用户个别操作进行了再次身份认证。同时，首次使用DB Adminer会下发给用户签名证书，进入工作空间前及对涉及高安全性要求的的功能的操作需要进行用户数字签名证书的校验，保障用户
                            </div>
                            <p class="am-text-center page-number">第 1 页</p>
                        </div>
                        <div>
                            <div class="manage-page">
                                <p style="text-indent: 0em;">是否一致，用户信息是否被篡改。除以上身份信息多重认证校验外，系统还做了其他涉及安全的处理，如：SQL注入（SQL Injection）、跨站脚本攻击（XSS）、Cookie安全、敏感信息存储、黑名单IP管理等安全措施。</p>
                                <p>2.4<span>&nbsp;&nbsp;</span>其他服务内容详见DB Adminer各版块功能。</p>
                                <p style="text-indent: 0em;margin-top: 10px;">三、用户信息</p>
                                <p>3.1<span>&nbsp;&nbsp;</span>用户被授权后将得到一个账号、密码以及数字签名证书，请保用户妥善管好自己的账号信息，用户对自己的帐号、密码、数字签名证书及安全负全部责任。</p>
                                <p>3.2<span>&nbsp;&nbsp;</span>用户发现其账户被盗用的、忘记密码的，可通过联系DB Adminer管理员的渠道重置密码；出现账号被盗用的情况，可联系管理员对该账户的使用采取临时性限制措施。</p>
                                <p>3.3<span>&nbsp;&nbsp;</span>DB Adminer建议用户定期更换密码，避免风险。</p>
                                <p style="text-indent: 0em;margin-top: 10px;">四、用户义务</p>
                                <p>4.1<span>&nbsp;&nbsp;</span>用户应遵守国家及地方的相关法律规定，不得违规非法操作。</p>
                            </div>
                            <p class="am-text-center page-number">第 2 页</p>
                        </div>
                        <div>
                            <div class="manage-page">
                                <p class="am-text-center am-text-lg" style="font-weight: bolder;margin-bottom: 10px;"></p>
                                <p>4.2<span>&nbsp;&nbsp;</span>用户不得利用DB Adminer提供的服务实施恶意删库、删数据等违规的激进的行为。</p>
                                <p>4.3<span>&nbsp;&nbsp;</span>用户违反本用户协议项下任何用户义务的，因用户行为引发的风险、责任及损失由用户自行承担。</p>
                                <p style="text-indent: 0em;margin-top: 10px;">五、服务变更、中断或终止</p>
                                <p>5.1<span>&nbsp;&nbsp;</span>如因平台维护或升级的需要而暂停服务、调整服务功能的，CSDN经营者将尽可能事先在本平台上进行通告。</p>
                                <p style="text-indent: 0em;margin-top: 10px;">六、其他</p>
                                <p>6.1<span>&nbsp;&nbsp;</span>本协议条款的任何条款无论因何种原因无效或不具可执行性，其余条款仍有效，对用户具有约束力。</p>
                                <p>6.2<span>&nbsp;&nbsp;</span>DB Adminer在先发布适用的规则、规范、制度等内容与本用户协议约定不一致的，以本协议条款为准。</p>
                                <p>6.3<span>&nbsp;&nbsp;</span>本协议条款最终解释权归DB Adminer所有。</p>
                            </div>
                            <p class="am-text-center page-number">第 3 页</p>
                        </div>
                        <div>
                            <div class="manage-page" id="signPage">
                                <div class="party party-a am-readonly" style="margin-top: 20px;height: 300px;">
                                    <div class="fm-sign">
                                        <label for="">甲方:</label>
                                        <input class="input-class length2" type="text" value="DB Adminer">
                                    </div>
                                    <div class="fm-sign">
                                        <label for="">归属:</label>
                                        <input class="input-class length5" type="text" value="OSFW">
                                    </div>
                                    <div class="fm-sign">
                                        <label for="">电话:</label>
                                        <input class="input-class length2" type="text" value="151****0903">
                                    </div>
                                    <div class="fm-sign">
                                        <p class="wrap">(盖章)</p>
                                    </div>
                                    <div class="fm-sign">
                                        <label for="">日期:</label>
                                        <input class="input-class year" type="text" value="2024">年
                                        <input class="input-class date" type="text" value="10">月
                                        <input class="input-class date" type="text" value="01">日
                                    </div>
                                    <div class="box" style="display: block!important;">
                                        <span class="letter1"></span>
                                        <span class="letter2"></span>
                                        <span class="letter3"></span>
                                        <span class="letter4"></span>
                                        <span class="letter5"></span>
                                        <span class="letter6"></span>
                                        <span class="letter7"></span>
                                        <span class="letter8"></span>
                                        <span class="letter9"></span>
                                        <span class="letter10"></span>
                                        <span class="letter11"></span>
                                        <span class="letter12"></span>
                                        <span class="letter13"></span>
                                        <span class="letter14"></span>
                                        <span class="letter15"></span>
                                    </div>
                                </div>
                                <div class="party party-b " style="margin-top: 20px;height: 300px;">
                                    <div class="fm-sign">
                                        <label for="">乙方:</label>
                                        <input class="input-class length2" type="text" value="管理员">
                                    </div>
                                    <div class="fm-sign">
                                        <label for="">账号:</label>
                                        <input class="input-class length2" type="text" value="admin">
                                    </div>
                                    <div class="fm-sign">
                                        <label for="">电话:</label>
                                        <input class="input-class length2" type="text" value="1511111111">
                                    </div>
                                    <div class="fm-sign">
                                        <p class="wrap">(盖章)</p>
                                        <button class="seal" onclick="submitHandler(this)">
                                            <span class="am-text-center">我已仔细阅读并接受</span>
                                            <span class="am-text-center">DB Adminer 用户协议</span>
                                        </button>
                                        <button class="qx-seal">取消</button>
                                    </div>
                                    <div class="fm-sign">
                                        <label for="">日期:</label>
                                        <input class="input-class year" type="text" value="2024">年
                                        <input class="input-class date" type="text" value="10">月
                                        <input class="input-class date" type="text" value="01">日
                                    </div>
                                    <div class="box2">
                                        <input type="hidden" name="usbKey" value="123456"/>
                                        <span></span>
                                    </div>
                                </div>
                            </div>
                            <p class="am-text-center page-number">第 4 页</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        [@script js=["fw", "base64", "agreement"] progress="false"]
            <!-- 自定义js -->
            <script type="text/javascript">
                yepnope({
                    test: Modernizr.csstransforms,
                    yep: [ctx + 'osfw/framework/index/agreement/lib/turn.js'],
                    nope: [ctx + 'osfw/framework/index/agreement/lib/turn.html4.js'],
                    both: [ctx + 'osfw/framework/index/agreement/css/basic.css'],
                    complete: loadApp
                });
                $(function () {
                    $(".prev-btn").on("click", function (event) {
                        $(".flipbook").turn("previous");
                    });
                    /*上一页按钮*/
                    $(".next-btn").on("click", function (event) {
                        $(".flipbook").turn("next");
                    });

                    $('.seal').on('click', function () {
                        submitHandler();
                    });

                    var applicationName = '${applicationName!"OSFW"}'; /*假设公司名称*/
                    var letter = applicationName.split('');
                    var o = 7 - Math.floor(letter.length / 2);
                    // $(this).parent().siblings('.box').children('span').html(applicationName);
                    for (var i = 0; i < letter.length; i++) {
                        $("#signPage .party-a .box").children('span').eq(o + i).html(letter[i]);
                    }

                    var isAgreement = '${isAgreement!'0'}';
                    if(isAgreement == '1') {
                        var str = '${userName!"使用人"}'; /*假设公司名称*/
                        $('.seal').parent().siblings('.box2').children('span').html(str);
                        $('.seal').hide().parent().siblings('.box2').show();
                    }
                });
                function loadApp() {
                    $('.flipbook').turn({
                        width: 914,
                        height: 643,
                        duration: 1000,   //翻页速度，值越小越快
                        // Hardware acceleration
                        // acceleration: true,
                        // Enables gradients
                        gradients: true,
                        // Auto center this flipbook
                        autoCenter: true,
                        // Elevation from the edge of the flipbook when turning a page
                        elevation: 643,
                        // The number of pages
                        pages: 3,
                        when: {         //监听事件
                            turning: function (e, page, view) {// 翻页前触发
                                console.log(page, view)
                            },
                            turned: function (e, page) { // 翻页后触发
                                console.log(page)
                            }
                        }
                    });
                    $('.manage-modal').show();
                }

                function submitHandler(obj) {
                    $("input[name=usbKey]").val("usbKey");
                    if ($.common.isEmpty($("input[name=usbKey]").val())) {
                        $.modal.alertWarning("缺少签字证书，请下载你的签字证书");
                        return false;
                    }
                    var str = '${userName!"使用人"}'; /*假设公司名称*/
                    $(obj).parent().siblings('.box2').children('span').html(str);
                    $(obj).hide().parent().siblings('.box2').show();

                    var usbKey  = $("input[name=usbKey]").val();
                    var userSign  = $(".box2").html();
                    console.log(usbKey, $('.box2').is(':visible'))
                    if ($.common.isEmpty(usbKey) || !$('.box2').is(':visible')) {
                        $.modal.alertWarning("缺少签字证书或未签字");
                        return false;
                    }
                    setTimeout(function () {
                        $(".flipbook").turn("previous");
                    }, 800);
                    setTimeout(function () {
                        $(".flipbook").turn("previous");
                    }, 900);
                    setTimeout(function () {
                        $(".flipbook").turn("previous");
                    }, 1000);
                    setTimeout(function () {
                        $(".flipbook").turn("previous");
                    }, 1200);
                    setTimeout(function () {
                        // 回调返回
                        window.parent.userAgreementCallback($.base64.encode(usbKey), $.base64.encode(userSign));
                        $.modal.close();
                    }, 2500);

                }
            </script>
        [/@script]
    [/@body]
[/@html]